<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link
            rel="stylesheet"
            href="../bootstrap-3.4.1/bootstrap-3.4.1/dist/css/bootstrap.css"
        />
        <script src="../11.17/jquery-3.6.1.js"></script>
        <script src="../bootstrap-3.4.1/bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    </head>
    <style>
        .my-table {
            width: 1800px;
            margin: auto;
            margin-top: 50px;
        }
    </style>
    <body>
        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a
                        href="#home"
                        aria-controls="home"
                        role="tab"
                        data-toggle="tab"
                        >Home</a
                    >
                </li>
                <li role="presentation">
                    <a
                        href="#profile"
                        aria-controls="profile"
                        role="tab"
                        data-toggle="tab"
                        >Profile</a
                    >
                </li>
                <li role="presentation">
                    <a
                        href="#messages"
                        aria-controls="messages"
                        role="tab"
                        data-toggle="tab"
                        >Messages</a
                    >
                </li>
                <li role="presentation">
                    <a
                        href="#settings"
                        aria-controls="settings"
                        role="tab"
                        data-toggle="tab"
                        >Settings</a
                    >
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    .1..
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">..2.</div>
                <div role="tabpanel" class="tab-pane" id="messages">..3.</div>
                <div role="tabpanel" class="tab-pane" id="settings">.4..</div>
            </div>
        </div>
    </body>
    <script>
        $('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
            e.target // newly activated tab
            e.relatedTarget // previous active tab
            console.log(123)
        })
    </script>
</html>
